
<html lang="en">
<head>
    <meta charset="UTF-8">

<!--    <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>-->
<!--    <script type="text/javascript" src="js/vue2.min.js"></script>-->
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap.min.css"/>
    <title>商品类别列表</title>
    <!--导入boostrap的css文件-->
</head>
<body>

<table id="getall" class="table table-striped">
    <thead>
    <tr>
        <th>类别编号</th>
        <th>类别名称</th>
        </tr>
    </thead>
    <tbody>
    <tr v-for="t in tttt">
        <td>{{t.tid}}</td>
        <td>{{t.tname}}</td>
        <td>
            <button type="button" class="btn btn-success">修改</button>
            <button type="button" @click="deletett(t.tid)" class="btn btn-danger">删除</button>
        </td>
    </tr>
    </tbody>
</table>
<div id = "div1">
    <button type="button" class="btn btn-success" id="btn">添加</button>
    <div class="modal fade" id="modalModify">

        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">X</button>
                    <h4 class="modal-title">商品类别信息添加：</h4>
                </div>
                <div class ="modal-body" >

                    <div class="input-group">
                        <span class="input-group-addon">类别编号:</span>
                        <input class="input-sm" type="text" id="tid"   v-model="Typess.tid" />
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon">类别名称:</span>
                        <input class="input-sm" type="text" id="tname"  v-model="Typess.tname" />
                    </div>
                    <br/>
                </div>
                <div class = "modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="modify" @click="add(1)">添加</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // $(function(){
    //     $("#btn").click(function(){
    //         // alert("xxx");
    //         $("#modalModify").modal("show");//显示隐藏的模态窗体
    //     });
    // });
    // var model = new Vue({
    //     el: "#modalModify",
    //     data: {
    //         Typess
    //     },
    //     methods:{
    //         add:function(id){
    //             // alert(model.dept);
    //             //    收集表单的数据
    //             alert(model.Typess.tname+model.Typess.tid);
    //             //    将表单数据发送到后端处理
    //             $.ajax({
    //                 url:'dept',
    //                 type:'POST',
    //                 data: JSON.stringify(model.dept),//此处可能需要Json转换
    //                 contentType:'application/json',
    //                 dataType:'json',
    //                 success:function(datax){
    //                     console.log(datax);
    //                     //更新本地数据集合
    //                     mytt.mydepts.push(datax);//
    //                     //   关闭模态窗体
    //                     $("#modalModify").modal("hide");
    //                 }
    //
    //             });
    //
    //         }
    //     }
    //
    // });

   var tt= new Vue({
        el :"#getall",
        data:{
            tttt:[],
        },
        methods: {
            deletett: function (tid) {
                alert(tid)
                $.ajax({
                    url: "/delete/" + tid,
                    type: "get",
                    dataType: "json",
                    success: function (date) {
                        if (date == 1) {
                            var arr=tt.tttt;
                            for (var i=0;arr.length;i++){
                                if (arr[i].tid==tid){
                                    arr.splice(i,1);
                                    break;
                                }
                            }
                            //tt.tttt.splice(tid, 1)
                        }
                    }

                })

            }

        }
    });
    $(function (){
        alert("进入方法入口了")
        getall()
    });
    function getall(){
        $.ajax({
            url:"/getTypes",
            type:"get",
            dataType:"json",
            success:function (da){
                alert(da);
                tt.tttt=da;

            }
        })
    };

</script>
<script>
    $(function(){
        $("#btn").click(function(){
            // alert("xxx");
            $("#modalModify").modal("show");//显示隐藏的模态窗体
        });
    });
    var model = new Vue({
        el: "#modalModify",
        data: {
            Typess:{tname,tid}
        },
        methods:{
            add:function(id){
                // alert(model.dept);
                //    收集表单的数据
                alert("进入添加方法了"+model.Typess)
                //alert(model.Typess.tname+model.Typess.tid);
                //    将表单数据发送到后端处理
                $.ajax({
                    url:'/addTT',
                    type:'get',
                    data: JSON.stringify(model.Typess),//此处可能需要Json转换
                    contentType:'application/json',
                    dataType:'json',
                    success:function(datax){
                        console.log(datax);
                        //更新本地数据集合
                        tt.tttt.push(datax)
                        //mytt.mydepts.push(datax);//
                        //   关闭模态窗体
                        $("#modalModify").modal("hide");
                    }

                });

            }
        }

    });




</script>

</body>
</html>